<template>
	<view class="account_box box" v-if="isShow">
		<view class="account_container">
			<view class="account_conatiner_top_bar">
				<view class="" style="margin-right: 20rpx;" @click="goback">
					<image src="../../static/back.png" mode="" style="width: 36rpx;height: 36rpx;"></image>
				</view>
				<view class="">
					我的账户
				</view>
			</view>
		</view>
		<!-- <uni-popup ref="popupCount" background-color="#fff" @change="changePopupDesc">
			<view class="popup_title">
				<view class="popup_top">
					<view class="">
						活动介绍
					</view>
					<view class="">
						<image src="../../static/close.png" mode=""
							style="width: 28rpx;height: 28rpx;margin-right: 50rpx;"></image>
					</view>
				</view>
				<view class="popup_center">
					<textarea name="" id="" cols="30" rows="10" v-model="activeData.desc"></textarea>
				</view>
				<view class="popup_right" @click="closePopup">
					保存
				</view>
			</view>
		</uni-popup> -->
		<view class="account_container_num">
			<view class="account_container_num_detail">
				<view class="account_container_num_detail_item item1">
					¥ {{freezeAmount*1+validAmount*1==0?"0.00":freezeAmount*1+validAmount*1}}
				</view>
				<view class="account_container_num_detail_item item2">
					总金额
				</view>
				<view class="account_container_num_detail_item  item3">
					¥ {{validAmount}}
				</view>
				<view class="account_container_num_detail_item  item4">
					可用金额
				</view>

			</view>
		</view>
		<view class="account_container_detail">
			<view class="uni-padding-wrap uni-common-mt">
				<uni-segmented-control :current="current" :values="items" :style-type="styleType"
					:active-color="activeColor" @clickItem="onClickItem" :inActiveColor='inActiveColor' />
			</view>
			<view class="content">
				<view v-if="current === 0">
					<view class="account_container_detail_item" v-for="(item,index) in userAccountChangeData"
						:key="index">
						<view class="account_container_detail_item_left">
							<view class="account_container_detail_item_left_top">
								{{timeArr[index]}}
							</view>
							<view class="account_container_detail_item_left_bottom">
								{{item.type}}
							</view>
						</view>
						<view class="account_container_detail_item_right">
							{{item.amount}}
						</view>
					</view>
				</view>
				<view v-if="current === 1">
					<view class="account_container_detail_item" v-for="(item,index) in userWithdrawalRecordsData"
						:key="index">
						<view class="account_container_detail_item_left">
							<view class="account_container_detail_item_left_top">
								{{timeArr[index]}}
							</view>
							<view class="account_container_detail_item_left_bottom">
								<text v-if='item.status==1'>申请中</text>
								<text v-if='item.status==2'>审核通过</text>
								<text v-if='item.status==3'>审核不通过</text>
								<text v-if='item.status==4'>支付成功</text>
								<text v-if='item.status==5'>支付失败</text>
							</view>
						</view>
						<view class="account_container_detail_item_right">
							{{item.amount}}
						</view>
					</view>
				</view>
				<view v-if="current === 2">
					<view class="applyWithdrawal_box">
						<view class="applyWithdrawal_title">
							提现申请
						</view>
						<view class="applyWithdrawal_conter">
							<view class="applyWithdrawal_item">
								总金额: ¥ {{freezeAmount*1+validAmount*1==0?"0.00":freezeAmount*1+validAmount*1}}
							</view>
							<view class="applyWithdrawal_item">
								<view class="">
									可用金额: ¥ {{validAmount}}
								</view>
								<view class="" style="margin-left: 100rpx;color: #afafaf;"
									@click="withdrawalAmount=validAmount" v-if="freezeAmount*1+validAmount*1!=0">
									全部提现
								</view>
								<view class="" style="margin-left: 100rpx;color: #afafaf;">
									可用金额为 0 无法提现
								</view>
							</view>
							<view class="applyWithdrawal_item">
								冻结金额: ¥ {{freezeAmount}}
							</view>
						</view>
						<view class="aplyWithdrawal_input">
							<view class="aplyWithdrawal_input_left">
								提现金额：
							</view>
							<view class="aplyWithdrawal_input_rtight">
								<input type="text" placeholder="请输入提现金额" v-model="withdrawalAmount" />
							</view>
						</view>
						<view class="aplyWithdrawal_btn popup_right" @click="gotoAplyWithdrawal">
							<!-- <button>确定</button> -->
							确定
						</view>
					</view>
				</view>
				<text class="nonemore" v-if="current === 2"></text>
				<text class="nonemore" v-else>没有更多了</text>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		userAccountBalance,
		userAccountChange,
		userWithdrawalRecords,
		userWithdrawal
	} from "../../api/request.js"
	import {
		timestampToDateTime
	} from "../../utils/time.js"
	export default {
		data() {
			return {
				isShow: false,
				withdrawalAmount: null, //提现金额
				items: ['活动明细', '提现记录', '申请提现'],
				current: 0,
				activeColor: '#FA2C17',
				inActiveColor: '#A3A3A3',
				styleType: 'text',
				validAmount: 0,
				freezeAmount: 0,
				userAccountChangeData: null,
				userWithdrawalRecordsData: {
					time: 0,
					status: "",
					amount: ""
				},
				timeArr: []
			};
		},
		onLoad() {
			this.getData()
			this.getUserchange()
			this.getUserWithdrawalRecords()
			this.isShow = true

		},
		methods: {
			async gotoAplyWithdrawal() {
				let res = await userWithdrawal({
					amount: this.withdrawalAmount
				})
				uni.showToast({
					title: "提现成功！"
				})
				console.log(res);
			},
			async getUserchange() {
				let result = await userAccountChange(1)
				console.log(result, 'sugdasjgdasgdsjgdasgdkjadfasdfjf');
				this.userAccountChangeData = result.records
			},
			async getUserWithdrawalRecords() {
				let result = await userWithdrawalRecords(1)
				console.log(result);
				this.userWithdrawalRecordsData = result.records
				this.userWithdrawalRecordsData.map((item) => {

					this.timeArr.push(timestampToDateTime(item.time))
				})
			},
			async getData() {
				let result = await userAccountBalance()
				this.validAmount = result.validAmount
				this.freezeAmount = result.freezeAmount
				console.log(result, 'result');
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
				if (this.current == 2) {

					// this.$refs.popupCount.open('bottom')
				}
			},
			goback() {
				uni.navigateBack()
			}
		},
	}
</script>

<style lang="scss">
	.segmented-control {
		height: 120rpx !important;
	}

	.popup_right {
		width: 90%;
		margin: auto;
		height: 88rpx;
		text-align: center;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		font-style: normal;
		background: conic-gradient(from 90deg at 50% 0%, #F09583 0%, #F9301C 100%);
		border-radius: 16rpx;
	}

	.segmented-control__item view .segmented-control__text {
		color: #A3A3A3;
	}

	.applyWithdrawal_box {
		width: 90%;
		margin: auto;
		display: flex;
		flex-direction: column;

		>view {
			margin-top: 60rpx;
		}

		.applyWithdrawal_title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #1A0200;
			line-height: 42rpx;
			text-align: center;
			font-style: normal;
			width: 100%;

		}

		.applyWithdrawal_conter {
			display: flex;
			flex-direction: column;
			margin-top: 0;

			.applyWithdrawal_item {
				margin-top: 60rpx;
				display: flex;
			}
		}

		.aplyWithdrawal_input {
			margin-top: 60rpx;
			display: flex;

			.aplyWithdrawal_input_left {
				width: 30%;
			}

			.aplyWithdrawal_input_rtight {
				flex: 1;
			}
		}

		.aplyWithdrawal_btn {
			// width: 200rpx;
			margin: auto;
			color: white;
			text-align: center;
			margin-top: 60rpx;
			border-radius: 10rpx;

		}
	}

	.account_container {
		width: 90%;
		margin: auto;
		margin-top: 88rpx;

		.account_conatiner_top_bar {
			margin-bottom: 20rpx;
			display: flex;
		}
	}

	.nonemore {
		width: 100%;
		height: 40rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #A3A3A3;
		line-height: 40rpx;
		text-align: center;
		font-style: normal;
		display: inline-block;
		margin-top: 40rpx;
	}

	.account_container_detail_item {
		width: 90%;
		height: 120rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		border: 2rpx solid #F3F3F3;
		display: flex;
		padding-left: 40rpx;
		padding-top: 20rpx;
		margin: auto;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.account_container_detail_item_left {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}

		.account_container_detail_item_right {
			margin-top: 36rpx;
			font-family: DINAlternate, DINAlternate;
			font-weight: bold;
			font-size: 36rpx;
			color: #FA301B;
			line-height: 42rpx;
			text-align: left;
			font-style: normal;
			margin-right: 40rpx;
		}
	}

	.account_container_detail {
		margin-top: -60rpx;
		background-color: white;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
	}

	.account_container_num {
		background: url("../../static/ACCOUNT/bg1.png") no-repeat 100%;
		background-size: 100% 100%;
		width: 100%;
		height: 432rpx;

		.account_container_num_detail {
			display: flex;
			flex-direction: column;
			margin-left: 80rpx;
			margin-top: 46rpx;

			.item1 {
				margin-top: 46rpx;
				font-family: DINAlternate, DINAlternate;
				font-weight: bold;
				font-size: 48rpx;
				color: #FFFFFF;
				line-height: 56rpx;
				text-align: left;
				font-style: normal;
			}

			.item2 {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 36rpx;
				color: #FFFFFF;
				line-height: 50rpx;
				text-align: left;
				font-style: normal;
				margin-bottom: 22rpx;
			}

			.item3 {
				font-family: DINAlternate, DINAlternate;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 32rpx;
				text-align: left;
				font-style: normal;
				margin-bottom: 6rpx;
			}

			.item4 {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
			}
		}
	}
</style>